import React, { Component } from 'react'
import { Layout, Menu, Dropdown, Avatar, Badge } from 'antd';
import {adminRoutes} from '../../routes'
import Icon ,{ DownOutlined } from '@ant-design/icons';
import {withRouter} from 'react-router-dom'
import { connect } from 'react-redux'
import { getNotificationList } from '../../actions/notifications'
import { loginOut } from '../../actions/user'
import './index.css'
import logo from './logo.png'

const { Header, Content, Sider } = Layout;



 class Frame extends Component {
    onDropDownMenuClick = ({ key}) => {
        if(key === '/loginOut') {
          this.props.loginOut()
        }else{
          this.props.history.push(key)
        }
     }

     onMenuClick = ({key}) => {
       this.props.history.push(key)
     }

    componentDidMount() {
      this.props.getNotificationList()
     }
    render() {
        const Dropmenu = (
            <Menu onClick={this.onDropDownMenuClick}>
              <Menu.Item key="/admin/notifications">
              <Badge dot={this.props.notifications!==0}>通知中心</Badge>
              </Menu.Item>
              <Menu.Item key="/admin/settings">
                设置
              </Menu.Item>
              {/* <Menu.Divider /> */}
              <Menu.Item key="/loginOut">退出</Menu.Item>
            </Menu>
          );

        const menu = adminRoutes.filter(item=>item.isNav===true) 
        const selectedKey = this.props.location.pathname.split('/')
        selectedKey.length = 3
        return (
            <Layout style={{minHeight: '100%'}} className='at'>
            <Header className="header" style={{backgroundColor: '#fff'}}>
              <div className="logo">
                  <img src={logo} style={{height: '48px'}} alt="Demo" />
              </div>
              <div>
              <Dropdown overlay={Dropmenu} trigger={['click']}>
              <a className="ant-dropdown-link" style={{display: 'flex', alignItems: 'center'}} onClick={e => e.preventDefault()}>
                    <Avatar src={this.props.avatar} />
                    <span>欢迎你,{this.props.displayName}</span>
                    <DownOutlined />
                    <Badge count={this.props.notifications} offset={[10, -10]}></Badge>
                </a>
            </Dropdown>
              </div>
              
            </Header>
            <Layout>
              <Sider width={200} className="site-layout-background">
                <Menu
                  mode="inline"
                  selectedKeys={[selectedKey.join('/')]}
                  defaultOpenKeys={['sub1']}
                  style={{ height: '100%', borderRight: 0 }}
                  onClick={this.onMenuClick}

                >
                 {
                     menu.map(item=>{
                         return <Menu.Item key={item.pathname} >
                                <Icon component={item.icon} />
                                {item.title}
                            </Menu.Item>
                     })
                 }
                    
                </Menu>
              </Sider>
              <Layout style={{ padding: '16px' }}>
                
                <Content
                  className="site-layout-background"
                  style={{
                    backgroundColor: '#fff',
                    margin: 0,
                  }}
                >
                  {this.props.children}
                </Content>
              </Layout>
            </Layout>
          </Layout>
        
        )
    }
}

const mapState = state => {
  return {
    notifications: state.notification.list.filter(item=>item.hasRead===false).length,
    displayName: state.user.displayName,
    avatar: state.user.avatar
  }
}

export default withRouter(connect(mapState, {getNotificationList, loginOut})(Frame))